<template>
	<view class="common-popup" :class="{
	'custom-right-popup':mode=='right',
	'custom-center-popup':mode=='center'
	}">
		<u-popup :show="showPopup" :mode="mode" :round="20" :overlay="true" :closeable="true"
			:closeOnClickOverlay="false" @close="close">
			<view class="popup-wrap" @touchmove.stop="" :style="[setStyle]">
				<view class="popup-title">
					<slot name="title"></slot>
				</view>
				<view class="popup-content">
					<slot></slot>
				</view>
				<view class="popup-footer">
					<slot name="footer"></slot>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "common-popup",
		props: {
			//显示弹框
			show: {
				type: Boolean,
				default: false,
			},
			// 打开模式 center，left，right
			mode: {
				type: String,
				default: "center"
			},
			width: {
				type: [String, Number],
			},
			height: {
				type: [String, Number],
			}
		},
		watch: {
			show: {
				immediate: true,
				handler(newValue, oldValue) {
					if (newValue === true || newValue === false) {
						this.showPopup = newValue
					}
				}
			}
		},
		computed: {
			setStyle() {
				if (typeof this.width === 'string') {
					return {
						width: this.width,
						height: this.height
					}
				}
				return {
					width: `${this.width}px`,
					height: `${this.height}px`
				}
			}
		},
		data() {
			return {
				showPopup: false,
			};
		},
		methods: {
			close() {
				this.$emit('close')
				this.showPopup = false
			},
			open() {
				this.$emit('open')
				this.showPopup = true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.common-popup {
		width: auto;
		max-width: 80vw;

		::v-deep .u-popup__content__close.u-popup__content__close--top-right {
			right: 3rem;
			top: 3rem;
		}
	}

	.popup-title {
		padding: 0;
	}

	.popup-wrap {
		padding: 3rem;
		width: auto;
		max-width: 80vw;
	}

	.popup-content {
		height: calc(100% - 10rem);
	}
</style>
